<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.6.12.js"></script>
    <style>
        .order{
            width: 90%;
            margin: 20px auto;
            padding: 30px 5px;
            border: solid 1px red;
            border-radius: 3px;
        }
        .li-content{
            display: flex;
            border: solid 1px #ccc;
            padding: 15px 5px;
            margin-bottom: 5px;
            list-style-type: none;
            justify-content: space-around;
            align-items: center;
        }
        ul>li{
            list-style-type: none;
        }
        .pic{
            width: 100px;
            height: 100px;
        }
        .pic >img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="order">
            <div v-if="this.lists.length<1" style="text-align: center;padding-top: 10px;">暂无订单</div>
            <div v-else>
                <div style="margin-left: 2.1%;">
                    <label for="allCheck">
                        <input type="checkbox" id="allCheck" v-model="allCheck" @change="allC">全选/全不选
                    </label>
                </div>
                <div>
                    <ul>
                        <li v-for="(item,index) in lists" :key="index">
                            <div class="li-content">
                                <input type="checkbox" v-model="checkGroup" :value="item" @change="oneC">
                                <div>商品名：{{item.name}}</div>
                                <div class="pic"><img :src="item.pic" alt=""></div>
                                <div>单价：{{item.price}}元</div>
                                <div>
                                    <button @click="item.defaultNum--" :disabled="item.defaultNum<=0">-</button>
                                    {{item.defaultNum}}
                                    <button @click="item.defaultNum++" :disabled="item.defaultNum>=item.maxNum">+</button>
                                </div>
                                <div @click="del(index,item.id)">删除</div>
                            </div>
                        </li>
                    </ul>
                    <div style="color: red;float: right;margin-right: 100px;">总计：{{sum()}} 元</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            allCheck:false,
            checkGroup:[],
            lists:[
                {
                    id:1,
                    name:'衣服',
                    maxNum:100,
                    defaultNum:1,
                    price:100,
                    pic:'../images/5.jpg',
                },
                {
                    id:2,
                    name:'裤子',
                    maxNum:200,
                    defaultNum:2,
                    price:200,
                    pic:'../images/5.jpg',
                },
                {
                    id:3,
                    name:'鞋子',
                    maxNum:300,
                    defaultNum:1,
                    price:300,
                    pic:'../images/5.jpg',
                },
                {
                    id:4,
                    name:'帽子',
                    maxNum:400,
                    defaultNum:1,
                    price:400,
                    pic:'../images/5.jpg',
                },
                {
                    id:5,
                    name:'围巾',
                    maxNum:500,
                    defaultNum:1,
                    price:500,
                    pic:'../images/5.jpg',
                }
            ]
        },
        methods:{
            sum(){
                total=0;
                this.checkGroup.forEach((item,index)=>{
                    total+=item.defaultNum * item.price;
                })
                return total;
            },
            allC(){
                if(this.allCheck){
                    this.checkGroup=this.lists;
                }else {
                    this.checkGroup=[];
                }
            },
            oneC(){
                if(this.checkGroup.length<this.lists.length){
                    this.allCheck=false;
                }else {
                    this.allCheck=true;
                }
            },
            del(index,delId){
                //删除checkGroup
                this.checkGroup=this.checkGroup.filter(item=>item.id!=delId);
                //删除lists
                this.lists.splice(index,1);
            }

        }
    });
</script>
</html>